<template>
  <div class="dy-main prerecorderInquire">
    <div class="dy-header">
      <x-header title="开户预录" :left-options="{preventGoBack:true}" @on-click-back="back"></x-header>
    </div>
    <div class="dy-body">
      <group gutter="0.05rem" v-show="queryStatus == '1'">
        <x-input title="客户姓名" placeholder="请输入客户姓名" v-model="clientName" label-width="2.05rem" text-align="right" class="cell">
          <img class="imgCamera" slot="right" src="../../assets/img/PreRecord/scan.png" alt="" >
        </x-input>
        <x-input title="证件号码" placeholder="请输入证件号码" label-width="2.05rem" v-model="IDNo" text-align="right" class="cell"></x-input>
        <!-- <datetime v-model="formatValue" :display-format="formatValueFunction" @on-change="change" title="有效期" placeholder="请选择到期日期" class="cell valid-date" format="YYYY-MM-DD" ></datetime> -->
        <x-input title="手机号码" placeholder="请输入手机号" label-width="2.05rem" v-model="mobile" text-align="right" class="cell"></x-input>
        <x-input title="短信验证码" class="cell weui-vcode" v-model="smsCode" placeholder="请输入验证码" label-width="2.05rem" :show-clear="false" :min="6" :max="6" @on-change="testYzm">
          <a slot="right" :class="{blue: !isTime, cry: isTime}" href="javascript:void(0)" @click="postCode">{{ codeText }}</a>
        </x-input>
        <!--<x-input title="验证码" label-width="2.05rem" class="cell" v-model="smsCode" placeholder="请输入短信验证码">-->
          <!--<a slot="right" class="check-button">获取验证码</a>-->
        <!--</x-input>-->
      </group>
      <x-button type="warn" class="confirm" ction-type="button" @click.native="query" v-show="queryStatus == '1'">查询</x-button>
      <group gutter="0.05rem" v-show="queryStatus== '0'">
        <cell title="客户姓名" :value="responseData.clientName" label-width="2.05rem" text-align="right" class="cell"></cell>
        <cell title="证件号码" :value="responseData.IDNo" label-width="2.05rem" text-align="right" class="cell"></cell>
        <cell title="有效期" :value="validityFunction(responseData.validity)" label-width="2.05rem" text-align="right" class="cell"></cell>
        <cell title="长期有效" :value="responseData.validFlag=='1'?'是':'否'" label-width="2.05rem" text-align="right" class="cell"></cell>
        <cell title="手机号码" :value="responseData.mobile" label-width="2.05rem" text-align="right" class="cell"></cell>
        <cell title="电子邮箱" :value="responseData.email" label-width="2.05rem" text-align="right" class="cell"></cell>
        <cell title="受雇行业" :value="responseData.vocation" label-width="2.05rem" text-align="right" class="cell"></cell>
        <cell title="职业" :value="responseData.occupation" label-width="2.05rem" text-align="right" class="cell"></cell>
        <cell title="开户通讯地址" :value="responseData.address" label-width="2.05rem" text-align="right" class="cell"></cell>
        <cell title="通讯邮件编码" :value="responseData.zipCode" label-width="2.05rem" text-align="right" class="cell"></cell>
        <cell title="开户原因" :value="responseData.comment" label-width="2.05rem" text-align="right" class="cell"></cell>
        <cell title="账户资金来源" :value="responseData.capitalResouce" label-width="2.05rem" text-align="right" class="cell"></cell>
        <cell title="是否开通动账通知" :value="responseData.noticeFlag=='1'?'是':'否'" label-width="2.05rem" text-align="right" class="cell"></cell>
        <cell title="是否开通手机银行" :value="responseData.mobileFlag=='1'?'是':'否'" label-width="2.05rem" text-align="right" class="cell"></cell>
        <cell title="是否开通网银" :value="responseData.ebankFlag=='1'?'是':'否'" label-width="2.05rem" text-align="right" class="cell"></cell>
        <cell title="是否开通玩应大额转账服务" :value="responseData.largeAmtFlag=='1'?'是':'否'" label-width="2.05rem" text-align="right" class="cell"></cell>
      </group>
      <zx-dialog v-model="chooseShow" type="warn" butType="button" :data="['确认']" title="查询失败" tipsmsg="根据您所提交的查询信息，没有找 到相应的预开户记录。请重新填写" @on-click-close="clickBack"></zx-dialog>
    </div>
    <!--<div class="dy-footer"></div>-->
  </div>
</template>
<script>
import { Actionsheet, Toast, Icon } from 'vux'
export default{
  components: {
    Actionsheet,
    Toast,
    Icon
  },
  data () {
    return {
      clientName: '宝强',
      IDNo: '330001199991910010', // 证件号码
      formatValue: '2018年08月08日', // 输入日期
      mobile: '', // 手机号
      smsCode: '', // 验证码
      queryStatus: '1', // 查询结果 0成功 1失败 控制页面显示
      chooseShow: false, // 报错弹框
      codeText: '发送验证码', // 验证按钮显示内容
      codeTime: 10, // 验证码倒计时
      isTime: null, // 验证码状态
      disableCode: false,
      formatValueFunction (val) { // 最终格式化日期
        let year = val.substr(0, 4)
        let month = val.substr(5, 2)
        let day = val.substr(8, 2)
        return year + '年　' + month + '月　' + day + '日'
      },
      // 返回数据
      responseData: {
        clientName: '',
        IDNo: '', // 证件号码
        validFlag: '', // 长期有效
        validity: '', // 输入日期
        mobile: '', // 手机号
        email: '', // 电子邮箱
        vocation: '', // 选择的受雇行业
        occupation: '', // 选择的职业
        address: '', // 通信地址
        zipCode: '', // 邮件编码
        comment: '', // 开户原因
        capitalResouce: '', // 资金来源
        noticeFlag: '0', // 是否开通动账通知
        mobileFlag: '0', // 是否开通手机银行
        ebankFlag: '0', // 是否开通网银
        largeAmtFlag: '0', // 是否开通大额
        employeeID: '123', // 推荐人编号
        status: '1' // 查询结果 0成功 1失败
      },
      validityFunction (val) { // 最终格式化日期
        let year = val.substr(0, 4)
        let month = val.substr(4, 2)
        let day = val.substr(6, 2)
        return year + '年' + month + '月' + day + '日'
      }
    }
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    change (value) { // 日期选择
      console.log('change', value)
    },
    goNext () {
      this.chooseShow = true
    },
    testYzm () {
      // todo
    },
    /*
    *  验证码发送
    */
    postCode () {
      let lVue = this
      lVue.codeText = (lVue.codeTime + 's后可重新发送')
      if (!lVue.isTime) {
        lVue.isTime = setInterval(() => {
          lVue.codeTime--
          if (lVue.codeTime === 0) {
            lVue.codeText = '发送验证码'
            lVue.disableCode = false
            clearInterval(lVue.isTime)
            lVue.isTime = null
            lVue.codeTime = 10
            return
          }
          lVue.codeText = lVue.codeTime + 's后可重新发送'
        }, 1000)
      }
      lVue.disableCode = true
    },
    // todo 接口没有改
    query () {
      let _this = this
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'http://whichat.icitic.net/mstep/mstep.do?act=business',
          'params': {'method_Name': 'CI004003_8', 'user_Data': { clientName: _this.clientName, IDNo: _this.IDNo, formatValue: _this.formatValue, mobile: _this.mobile }}
        }),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            let returnData = response.data
            if (returnData.status === 0 || returnData.status === '0') {
              _this.responseData = returnData.data[0]
              _this.queryStatus = '0'
              // _this.aaa = returnData.data[0]
            } else {
              // todo 失败的展示
              _this.queryStatus = '0'
              _this.chooseShow = true
            }
          } else {
            console.log('fail')
          }
        })
    },
    clickBack () {
      this.queryStatus = 1
    }
  },
  mounted () {
    let _this = this
    console.log(_this.validityFunction(_this.responseData.validity))
  }
}
</script>
<style lang="less">
  .prerecorderInquire {
    .dy-body {
      overflow: auto;
      .confirm{
        background-color: #ec1b30;
        width: 6.9rem;
        height: .88rem;
        margin-top: .64rem;
        margin-bottom: 2.4rem;
        font-size: .34rem;
      }
    .imgCamera{
       width:.42rem;
       height: .42rem;
       margin-left: .24rem;
       vertical-align: middle;
     }
    /*复选框*/
    .zx-radio > .radio i{
      margin-bottom: .05rem;
    }
    .zx-dialog .zx-dialog-box{
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
  }
}
</style>
